<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Ionic Item Sliding</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>


      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic CDN demo</ion-title>
          <ion-buttons slot="primary">
            <ion-button onclick="addItems()">Add Items</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <p>
          <ion-button onclick="addItems()">Add Items</ion-button>
        </p>
        <ion-virtual-scroll id="virtual"></ion-virtual-scroll>
        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
          <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="Loading more data...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-content>



  </ion-app>

  <script>
    const virtual = document.getElementById('virtual');
    const items = Array.from({length: 100}, (x, i) => i);

    function addItems(append) {
      if(!append) {
        append = Array.from({length: 10}, (x, i) => "append" + i);
      }
      items.push(...append);
      virtual.markDirtyTail(append.length)
    }

    virtual.itemHeight = () => 45;
    virtual.headerFn = (item, index) => {
      // if (index % 20 === 0) {
      //   return 'Header ' + index;
      // }
      return null;
    }

    function renderItem(el, item) {
      if (!el) {
        el = document.createElement('ion-item');
        const text = document.createTextNode(item);
        el['$content'] = text;
        el.appendChild(text);
      } else {
        el['$content'].nodeValue = item;
      }
      return el;
    }

    function renderHeader(el, item) {
      if (!el) {
        el = document.createElement('ion-item-divider');
        const text = document.createTextNode(item);
        el['$content'] = text;
        el.appendChild(text);
      } else {
        el['$content'].nodeValue = item;
      }
      return el;
    }

    virtual.itemRender = (el, cell) => {
      if (cell.type === 0) return renderItem(el, cell.value);
      return renderHeader(el, cell.value);
    };
    virtual.items = items;



    const infiniteScroll = document.getElementById('infinite-scroll');
    infiniteScroll.addEventListener('ionInfinite', async function() {
      console.log('Loading data...');
      const data = await getAsyncData();
      infiniteScroll.complete();
      addItems(data);

      console.log('Done');
    });

    function getAsyncData() {
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({length: 10}, (x, i) => "append" + i);
          resolve(data);
        }, 500);
      });
    }
  </script>
</body>
</html>
